<%@page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" import="java.util.*,hotel.entity.*"%>
<%@include file="../link.html"%>

<!-- 入住，填写房客信息页面 -->
<script type="text/javascript">
var html1 = "<div class='form-group'><label class='col-sm-4 control-label'>入住房客";
var html2 = "</label><div class='col-sm-5'><input name='temp_customerName' class='form-control' required></div></div>";
var html3 = "<div class='form-group'><label class='col-sm-4 control-label'>身份证号码</label><div class='col-sm-5'><input name='temp_id_number' class='form-control' required></div></div>";
var html4 = "<div class='form-group'><label class='col-sm-4 control-label'>联系电话</label><div class='col-sm-5'><input name='temp_tele' class='form-control' required></div></div>";
var divId=${divId}
	$(document).ready(function() {
		//增加房客
		$("#btn-addCustomer").click(function() {
			var count = parseInt($('#temp_count').val());
			if (count >= 3) {

				return;
			}
			$('#temp_count').val(++count);
			var html=$('#addCustomer').html();
			$('#addCustomer').html(html+html1+count+html2+html3+html4);
		});

		//减少房客
		$("#btn-deleteCustomer").click(function() {
			var count = parseInt($('#temp_count').val());
			if (count <= 1) {

				return;
			}
			$('#temp_count').val(--count);
			$('#addCustomer').html('');
			for(var i=0;i<count-1;i++){
				$('#addCustomer').html($('#addCustomer').html()+html1+(i+2)+html2+html3+html4);
			}
		});
		
		//确定
		$("#btn-confirm").click(function() {
			var index=$('#btn-confirm').attr('class').indexOf("disabled");
			if(index==-1){
				var temp_customerName="";//房客姓名
				var temp_number="";//房客证件
				var temp_tele="";//房客电话
				$("input[name='temp_customerName']").each(function(i){
					temp_customerName+=","+this.value;
				});
				
				$("input[name='temp_id_number']").each(function(i){
					temp_number+=","+this.value;
				});
				
				$("input[name='temp_tele']").each(function(i){
					temp_tele+=","+this.value;
				});
				$("div[id='"+divId+"']" , parent.document).find("input[name='count']").val($('#temp_count').val());
				$("div[id='"+divId+"']" , parent.document).find("input[name='customerName']").val(temp_customerName.substring(1));
				$("div[id='"+divId+"']" , parent.document).find("input[name='id_number']").val(temp_number.substring(1));
				$("div[id='"+divId+"']" , parent.document).find("input[name='tele']").val(temp_tele.substring(1));
				var index = parent.layer.getFrameIndex(window.name);
				parent.layer.close(index);	
			}
		});
	});

</script>

<div style="padding-top: 25px;">
	<form action="#" class="form-horizontal" data-toggle="validator" role="form">

		<div class="form-group">
			<label class="col-sm-4 control-label">房客数量</label>
			<div class="col-sm-5">
				<div class="input-group">
					<span class="input-group-addon">
						<button id="btn-deleteCustomer" type="button" class="btn btn-primary btn-xs">
							<i class="fa fa-minus"></i>
						</button>
					</span>
					<input id="temp_count" class="form-control" readonly value="1">
					<span class="input-group-addon">
						<button id="btn-addCustomer" type="button" class="btn btn-primary btn-xs">
							<i class="fa fa-plus"></i>
						</button>
					</span>
				</div>
			</div>
		</div>

		<div class="form-group">
			<label class="col-sm-4 control-label">入住房客1</label>
			<div class="col-sm-5">
				<input name="temp_customerName" class="form-control" autofocus="autofocus" required>
			</div>
			<div class="help-block with-errors"></div>
		</div>

		<div class='form-group'>
			<label class='col-sm-4 control-label'>身份证号码</label>
			<div class='col-sm-5'>
				<input name='temp_id_number' class='form-control' required>
			</div>
			<div class='help-block with-errors'></div>
		</div>

		<div class='form-group'>
			<label class='col-sm-4 control-label'>联系电话</label>
			<div class='col-sm-5'>
				<input name='temp_tele' class='form-control' required>
			</div>
			<div class='help-block with-errors'></div>
		</div>
		
		<div id="addCustomer"></div>
		
		<div class="box-footer"></div>

		<div class="form-group">
			<label class="col-sm-4 control-label"></label>
			<div class="col-sm-5 pull-right">
				<button id="btn-confirm" type="button" class="btn btn-success">
					<i class="fa fa-check"></i> 保存
				</button>
			</div>
		</div>
	</form>
</div>